<template>
  <div id="noticeCenter">
    <!-- 顶部按钮-创建公告 -->
    <div class="add-notice">
      <el-button
        class="button-add"
        type="primary"
        icon="el-icon-plus"
        @click="editNotice()"
        >创建公告</el-button
      >
    </div>

    <!-- 表格和分页 -->
    <el-table
      v-loading="tableLoading"
      :data="noticeList"
      style="width: 100%"
      element-loading-text="晓琳拉屎中..."
      element-loading-spinner="el-icon-loading"
      :header-cell-style="{background: '#f9fafc', color: '#000'}"
    >
      <el-table-column label="公告标题" width="200">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.title"
            placement="top-end"
          >
            <div>{{ scope.row.title }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="sendPerson" label="发送人" width="100">
      </el-table-column>
      <el-table-column label="接收人" width="150">
        <template slot-scope="scope">
          <div>
            {{
              `${scope.row.acceptPeo[0]}、${scope.row.acceptPeo[1]}等${scope.row.acceptPeo.length}人`
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="接收组"
        width="150"
        :formatter="formatterGroup"
      ></el-table-column>
      <el-table-column prop="createTime" label="发送时间" width="200">
      </el-table-column>
      <el-table-column prop="needSee" label="应查看数量" width="150">
      </el-table-column>
      <el-table-column prop="realSee" label="已查看数量" width="150">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="editNotice(scope.row.id, scope.row)"
            >编辑</el-button
          ><el-button type="text" @click="editNotice()">重新发送</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
    >
    </el-pagination>
    <!-- 查看公告弹出框 -->
    <e-drawer
      :visible.sync="noticeVisible"
      :content="drawerContent"
      width="35%"
    >
      <notice-form :notice-form="noticeForm"></notice-form>
    </e-drawer>
  </div>
</template>

<script>
import {noticeAPi} from '@/api'
import EDrawer from 'comp/E-Drawer'
import NoticeForm from './components/noticeForm'
export default {
  name: 'NoticeCenter',
  components: {
    EDrawer,
    NoticeForm,
  },
  data() {
    return {
      // 所有公告列表
      allNoticeList: [],
      // table的loading
      tableLoading: true,
      // 当前页
      currentPage: 1,
      // 设置每页展示的条数
      pageSizes: [10, 20, 30, 40],
      // 展示条数
      pageSize: 10,
      // 总数
      total: 0,
      // 控制公告抽屉打开的开关
      noticeVisible: false,
      // 创建公告/编辑公告
      drawerContent: '创建公告',
      // form表单传递的数据
      noticeForm: {
        acceptGroup: [],
        acceptPeo: [],
        content: '',
        sendTime: '',
        isZylSend: 0,
        level: 1,
        siteImgList: [],
        title: '',
      },
    }
  },
  mounted() {
    this.__init__()
  },
  methods: {
    /**
     * 页面初始化的操作->所有页面第一次进入需要渲染的get请求都放到这
     */
    __init__() {
      this.getAllNotice()
    },
    /**
     * 获取所有的公告
     */
    getAllNotice() {
      noticeAPi.getAllNotice().then(res => {
        this.allNoticeList = res.data
        this.tableLoading = false
        this.total = this.allNoticeList.length
      })
    },
    /**
     * 处理表格数据的第二个写法,formatter
     * 处理组别
     */
    formatterGroup(row) {
      if (row.acceptGroup.length > 1) {
        return `${row.acceptGroup[0]}等${row.acceptGroup.length}组`
      } else {
        return `${row.acceptGroup[0]}`
      }
    },
    /**
     * 更改pageSizes框回调的函数
     */
    handleSizeChange(val) {
      this.pageSize = val
    },
    /**
     * 改变当前页出发的回调函数
     */
    handleCurrentChange(val) {
      this.currentPage = val
    },
    editNotice(id, data) {
      console.log(data)
      this.noticeVisible = true
      if (id) {
        this.drawerContent = '编辑公告'
        this.noticeForm = {...data} // 深拷贝和浅拷贝的问题
      } else {
        this.drawerContent = '创建公告'
        this.noticeForm = {}
      }
    },
  },
  computed: {
    // 需要传给表格，渲染的数据
    noticeList() {
      // 计算页面开始的数据位置 -> 当前页 - 1 * 一页有多少条
      const start = (this.currentPage - 1) * this.pageSize

      // 计算页面结束的数据位置
      let end = this.currentPage * this.pageSize
      if (end >= this.allNoticeList.length) end = this.allNoticeList.length

      return this.allNoticeList.slice(start, end)
    },
  },
}
</script>

<style lang="less" scoped>
#noticeCenter {
  height: calc(100% - 55px);
  overflow: auto;
  padding: 15px 20px;
  .button-add {
    padding: 9px 21px;
    border-radius: 2px;
  }
  .el-table {
    margin: 20px 0;
  }
  .el-table td div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .el-pagination {
    text-align: right;
    margin: 20px;
  }
}
</style>
